import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// slivers:LiveView、GridView最终构建都需要buildSilver，返回的List<sliver>是最终滚动的对象
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        /*appBar: AppBar(
          title: Text('自定义滚动列表'),
        ),*/
        body: CustomScrollViewContent(),
      ),
    );
  }
}

// CustomScrollViewContent可以传入不同sliver实现网格、列表等混合
// 上面是网格，下面是列表
class CustomScrollViewContent extends StatelessWidget {
  const CustomScrollViewContent({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      // 所有需要跟随滑动操作的组件都需要放在次数组中，但必须是Sliver组件系列
      slivers: [
        SliverAppBar(
          pinned: true,
          // 是否跟随滚动
          // primary: true,
          // 扩展默认高度
          expandedHeight: 300,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('hello world'),
            background: Image.asset('assets/images/flower.jpg'),
          ),
        ),
        // 如果在CustomScrollView包括SafeArea上包裹SafeArea内容无法滚动到安全区域
        // 使用SliverSafeArea可以让内容滚动到安全区域
        SliverSafeArea(
          sliver: SliverGrid(
              delegate: SliverChildBuilderDelegate(
                  (context, index) => Icon(
                      IconData(0xe165 + index, fontFamily: 'MaterialIcons')),
                  childCount: 12),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 8,
                crossAxisSpacing: 8,
                childAspectRatio: 3.0,
              )),
        ),
        // 如果在CustomScrollView加Padding，内容无法滚动到Padding区域，使用SliverPadding内容可以滚动到Padding区域
        SliverPadding(
          padding: const EdgeInsets.all(12.0),
          sliver: SliverGrid(
              delegate: SliverChildBuilderDelegate(
                  (context, index) => Icon(
                      IconData(0xe145 + index, fontFamily: 'MaterialIcons')),
                  childCount: 12),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 8,
                crossAxisSpacing: 8,
                childAspectRatio: 3.0,
              )),
        ),
        // ListView
        SliverFixedExtentList(
            delegate: SliverChildBuilderDelegate(
                (context, index) => Text('数据$index')),
            itemExtent: 30.0)
      ],
    );
  }
}
